<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { stateMap } from './const'
import { getAccodentApi } from './service'
@Component({
  name: 'Accident'
})
export default class Accident extends Vue {
  get stateMap() {
    return stateMap
  }
  handle2Detail(_id: string) {
    uni.navigateTo({
      url: './accidentDetails?_id=' + _id
    })
  }
  onShow() {
    this.getData()
  }
  list: Recordable = {}
  async getData() {
    const { data } = await getAccodentApi()
    this.list = data
  }
}
</script>

<template>
  <view class="p-20rpx">
    <view v-if="list.length">
      <view
        v-for="i in list"
        :key="i._id"
        class="flex justify-between items-center bg-white rounded-16rpx p-20rpx item"
        @click="handle2Detail(i._id)"
      >
        <view>
          <view class="truncate w-560rpx">{{ i.desc }}</view>
          <view class="text-26rpx mt-10rpx text-#999">{{ i.time }}</view>
        </view>
        <view class="text-28rpx" :style="{ color: stateMap[i.state].color }">
          {{ stateMap[i.state].label }}
        </view>
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>

<style scoped lang="scss">
.item {
  border-bottom: 1rpx solid #eee;
  &:last-child {
    border-bottom: none;
  }
}
</style>
